<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改密码</title>
    <base href="/">

    <link rel="shortcut icon" href="assets/media/image/favicon.png"/>
    <link rel="stylesheet" href="vendors/bundle.css" type="text/css">
    <link rel="stylesheet" href="vendors/datepicker/daterangepicker.css">
    <link rel="stylesheet" href="vendors/vmap/jqvmap.min.css">
    <link rel="stylesheet" href="assets/css/app.css" type="text/css">
    <!--弹窗CSS-->
    <link rel="stylesheet" href="assets/css/modal.css" type="text/css">
</head>
<body class="container">

<div class="preloader">
    <div class="preloader-icon"></div>
</div>

<!--引入公共头部页面-->
<div th:replace="~{commons/header :: header}"></div>

<div id="main">
    <!--引入公共导航栏页面-->
    <div th:replace="~{commons/navigation :: navigation}"></div>

    <!-- begin::主要内容 -->
    <div class="main-content">
        <div class="row">
            <div class="col-md-10 card" style="margin-left: 15px">
                <form id="userPasswordModify" action="/user/info_modify" method="post"
                      style="margin-top: 65px;margin-bottom: 65px;font-size: 115%">
                    <input name="id" th:value="${user.id}" type="hidden">
                    <div class="form-group row">
                        <label for="uname" class="col-sm-4 col-form-label text-right">用户名</label>
                        <div>
                            <input name="username" th:value="${user.username}" readonly type="text" class="form-control"
                                   id="uname" style="border-radius: .30em;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="name" class="col-sm-4 col-form-label text-right">姓名</label>
                        <div>
                            <input name="name" th:value="${user.name}" readonly id="name" type="text"
                                   class="form-control" style="border-radius: .30em;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="phone" class="col-sm-4 col-form-label text-right">联系方式</label>
                        <div>
                            <input th:value="${user.phone}" readonly name="phone" type="text" class="form-control"
                                   id="phone" style="border-radius: .30em;">
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="password" class="col-sm-4 col-form-label text-right">密码</label>
                        <div>
                            <input name="pwd" th:value="${user.pwd}" type="password" class="form-control" id="password"
                                   style="border-radius: .30em;">
                        </div>
                    </div>

                    <br>
                    <div class="form-group row">
                        <div class="col-sm-5 text-right">
                            <button type="submit" class="btn btn-primary" style="border-radius: .30em;">修改</button>
                        </div>
                        <div class="col-sm-3 text-right">
                            <a href="/user/query" type="button" class="btn btn-gradient-dark"
                               style="border-radius: .30em;">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!--引入公共的JavaScript脚本-->
        <div th:replace="~{commons/footer :: footer}"></div>
    </div>
</div>

<!--引入公共的JavaScript脚本-->
<div th:include="~{commons/scripts :: scripts}"></div>
<script src="assets/js/app.js"></script>
<script src="assets/js/modal.js"></script>
<script>
    $(() => {
        $('#userPasswordModify').submit(function () {
            let data = $(this).serializeArray();
            let url = "/user/update"
            $.post(url, data, function (data) {
                let msg = data.msg;
                let method = Function();
                if (data.code >= 0) {
                    method = function () {
                        window.location.href = "/user/query"
                    }
                }
                let mModal1 =new mModal({
                    title: "提示", // 标题，默认：提示
                    width: "25%", // 弹出框宽度，默认 25%
                    top: "25vh", // 距离可视区域顶部距离 CSS中 margin-top 值
                    content: msg, // 正文，默认：正文内容
                    cancelText: "取 消", // 取消按钮文本
                    confirmText: "确 定", // 确定按钮文本
                    showCancelButton: false, // 是否显示取消按钮
                    showConfirmButton: true, // 是否显示确定按钮
                    showClose: true, // 是否显示关闭按钮
                    modal: true, // 是否需要遮罩层
                    customClass: "", // 自定义类名confirm
                    confirm: function () {
                        mModal1.close();
                        method();
                    },
                });
                mModal1.renderDom();
            }, "json")
            return false;
        })
    })
</script>
</body>
</html>
